<template>
    <div class="list">
        <div class="go_back" @click="back">返回</div>
        <div class="home_list">
               <div class="list_cont" >
                    <div class="list_info" v-for="(item, index) in goods" :key="index">
                        <div v-if="item.type==2"  class="infor_img"  @click="goNews(item.id)">
                            <img :src="item.pict_url">
                        </div>
                        <div v-if="item.type==1"  @click="goDetail(item.id)">
                            <div class="list_img">
                                <img class="ocn_img" :src="item.pict_url">
                            </div>
                            <div class="list_menu">
                                <div class="list_title">{{item.title}}</div>
                                <div class="list_store"><span v-text="item.user_type==0?'淘宝':'天猫'" class="store_type"></span><span class="store_title"> {{item.shop_title}}</span></div>
                                <div class="quan_num">
                                    <span class="quan_info"><span class="num">{{item.coupon_money}} </span> 元券</span>
                                </div>
                                <div class="list_rebate">
                                    <div class="rebate_num">奖 ¥ {{item.reward_price}}</div>
                                    <div class="list_sale">销量{{item.volume}}</div>  
                                </div> 
                                <div class="list_price">
                                        <div class="price_now"><small>¥</small> {{item.coupon_price}} <small>券后</small></div>
                                        <div class="price_old">¥ {{item.zk_final_price}}</div>
                                </div>
                                  
                            </div>
                        </div>    
                    </div>  
                    <div v-if="load" class="loader">正在加载中...</div>  
                    <div v-if="bottom" class="bottom">已经到底啦</div>  
              </div>
        </div> 
        <temp_top></temp_top>       
    </div>
</template>
<script>
import  temp_top from './common.vue'
export default {
		data() {
            return {
                goods:"", 
                load:false,
                bottom:false,
                page:1,
                cate_id:0,
            }       
        },
        created(){
            
              
        },
        components:{
            "temp_top":temp_top,
        },
        methods:{
            goDetail(e){
                this.$router.push({path:'/detail',query:{id:e}});
            }, 
            goNews(e){
                this.$router.push({path:'/news',query:{id:e}});
            },
            back(){
                this.$router.go(-1); 
            }, 
            scroll(goods,b,c) {
                let flag = false;
                window.onscroll = () => {
                    let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离
                    let vh = document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight; // 浏览器视口的高度
                    let height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); // 文档的总高度
                    let bottomOfWindow =top + vh >= height;
                        if(bottomOfWindow&&flag==false){
                            flag=true;
                            this.page++;
                                var that = this;
                                that.load=true;
                                let cat={};
                                cat[c]=that.cate_id;
                                cat['page']=that.page;
                                cat['limit']=20;
                                var params = cat;
                                this.$axios.get( //传参发起请求
                                    b, {
                                        params
                                    }
                                ).then(function (response) { //接口返回数据
                                var data=response.data.data;
                                    if(data.length<=0){
                                        that.bottom=true;
                                        that.load=false;
                                    }else{
                                        for(var i =0;i<data.length;i++){
                                            goods.push(data[i]);
                                        };
                                        that.load=false;
                                        flag=false;
                                    }

                                }, response => {
                                    console.log("error");
                                });
                            }
                }
            },          
        },
        beforeRouteEnter (to, from, next) {
            if ( from.name === 'Detail') {
              to.meta.isUseCache = true;
            } else {
              to.meta.isUseCache = false;
            }
            
            next()
        },    
        activated() {
            this.cate_id=this.$route.query.id; 
            let type=this.$route.query.type;
            document.title=this.$route.query.title;  
            if(!this.$route.meta.isUseCache){
                    this.page=1;
                    this.goods="";
                    this.load=false;
                    this.bottom=false;
                    if(type==3){
                        this.$axios.get("/v1/common/itemAlgList",{
                            params:{
                                type:this.cate_id,
                                page:this.page,
                                limit:20,
                            },
                        }).then(res => {
                            if(res.data.code==200){
                                var data=res.data.data;
                                this.goods=data;
                                this.scroll(this.goods,"/v1/common/itemAlgList","type");
                            }else{
                            Toast(res.data.msg);
                            }    
                        }, res => {
                            console.log("error");
                        });                        
                    }else{
                            this.$axios.get("/v1/common/itemList",{
                                params:{
                                    cate_id:this.cate_id,
                                    page:this.page,
                                    limit:20,
                                },
                            }).then(res => {
                                if(res.data.code==200){
                                    var data=res.data.data;
                                    this.goods=data;
                                    this.scroll(this.goods,"/v1/common/itemList","cate_id");
                                }else{
                                Toast(res.data.msg);
                                }    
                            }, res => {
                                console.log("error");
                            });
                    }         
                    // 恢复成默认的false，避免isUseCache一直是true，导致下次无法获取数据
                    this.$route.meta.isUseCache=false
            }
        } ,             
}
</script>
<style scoped>
.go_back{width:148px;height:70px;background:url("/static/images/team_go_back.png") no-repeat left center;background-size:48px 48px;line-height:70px;text-align: center;font-size:28px;color:#333334;margin-left:16px;}
.home_list{width:100%;padding-bottom:20px;}
.home_list .super_top{margin-left:26px;}
.home_list .list_cont{width:704px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap: wrap;}
.list_info{width:340px;height:660px;background:#FFF;border:2px solid #E4E4E4;border-radius:24px;margin-bottom:24px;overflow: hidden;}
.list_info .ocn_img{width:100%;height:340px;}
.list_menu{width:330px;padding:0 0 0 10px;border-radius:32px 32px 24px 40px;background:#FFF;}
.list_title{color:#000000;height:80px;font-size:28px;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.list_store{color: #333334;font-size:24px;overflow: hidden;margin:12px 0;height:38px;}
.list_store .store_type{padding:0px 8px;text-align:center;font-size:18px;color:#fff;background:#FF2741;border-radius:4px;margin-right:8px;display: inline-block;}
.list_store .store_title{line-height:40px;margin:12px 0;height:40px;}
.list_rebate{font-size:24px;color:#FE3B30;margin-bottom:20px;display: flex;justify-content: space-between;}
.list_price{display:flex;justify-content:flex-start;height:50px;overflow: hidden;}
.list_price .price_now{font-size:36px;color:#FE3B30;font-weight:bold;max-width:196px;}
.list_price .price_now small{font-size:20px;}
.list_price .price_old{color:#9B9B9B;font-size:20px;text-decoration:line-through;line-height:60px;margin-left:8px;}
.list_sale{font-size:24px;color:#9B9B9B;margin-right:18px;}
.list_quan span{font-size:32px;font-weight:bold;}
.quan_num{margin-bottom:18px;}
.quan_info{padding:2px 8px;background:#FFE514;border-radius:4px;font-size:18px;text-align: center;color:#333334;}
.quan_num span.num{font-size:20px;font-weight:bold;color:#333334;}
.activity a{text-decoration: none;}
.loader{font-size:24px;line-height:80px;text-align: center;width:100%;}
.bottom{font-size:24px;line-height:80px;text-align: center;width:100%;}
</style>